﻿<!DOCTYPE HTML>

<html>
  <head>
    <meta charset="UTF-8">
    <title>EasyUI Message氣泡訊息展示</title>
    <!-- EasyUI framework -->
    <link rel="stylesheet" href="../js/easyui/1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" href="../js/easyui/1.3.2/themes/icon.css">
    <link rel="stylesheet" href="../js/easyui/1.3.2/demo/demo.css">
    <script src="../js/easyui/1.3.2/jquery-1.8.0.min.js"></script>
    <script src="../js/easyui/1.3.2/jquery.easyui.min.js"></script>
  </head>

  <body>
	<h2>Basic Messager</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div style="font-size:1.6em">點擊按鈕看各式訊息反應。</div>
	</div>
	<div style="margin:10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="show()">Show</a>
		<a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>
		<a href="#" class="easyui-linkbutton" onclick="fade()">Fade</a>
		<a href="#" class="easyui-linkbutton" onclick="progress()">Progress</a>
	</div>
	<script type="text/javascript">
		function show(){
			$.messager.show({
				title:'My Title',
				msg:'Message will be closed after 4 seconds.',
				showType:'show',
				style:{
					right:'',
					bottom:''
				}
			});
		}
		function slide(){
			$.messager.show({
				title:'My Title',
				msg:'Message will be closed after 5 seconds.',
				timeout:5000,
				showType:'slide',
				style:{
					right:'',
					bottom:''
				}
			});
		}
		function fade(){
			$.messager.show({
				title:'My Title',
				msg:'Message never be closed.',
				timeout:0,
				showType:'fade',
				style:{
					right:'',
					bottom:''
				}
			});
		}
		function progress(){
			var win = $.messager.progress({
				title:'Please waiting',
				msg:'Loading data...'
			});
			setTimeout(function(){
				$.messager.progress('close');
			},5000)
		}
	</script>
  </body>
</html>

